import { View, Text } from '@tarojs/components'
import { useState } from 'react'
import { Button, Card } from '@nutui/nutui-react-taro'
import Taro, { useLoad } from '@tarojs/taro'
import { userApi, orderApi, serviceApi } from '../../api/index'
import './index.less'

export default function TestMock() {
  const [result, setResult] = useState('')
  const [loading, setLoading] = useState(false)

  const testApi = async (apiName, apiCall) => {
    setLoading(true)
    setResult(`正在测试 ${apiName}...`)
    
    try {
      const data = await apiCall()
      setResult(`${apiName} 测试成功:\n${JSON.stringify(data, null, 2)}`)
      console.log(`${apiName} 结果:`, data)
    } catch (error) {
      setResult(`${apiName} 测试失败: ${error.message}`)
      console.error(`${apiName} 错误:`, error)
    } finally {
      setLoading(false)
    }
  }

  const testApis = [
    {
      name: '获取用户信息',
      call: () => userApi.getUserInfo()
    },
    {
      name: '获取订单列表',
      call: () => orderApi.getOrderList()
    },
    {
      name: '获取服务列表',
      call: () => serviceApi.getServiceList()
    },
    {
      name: '创建订单',
      call: () => orderApi.createOrder({
        serviceType: '测试服务',
        serviceTime: '2025-01-28 15:00',
        address: '测试地址',
        amount: 199.00
      })
    }
  ]

  return (
    <View className='test-mock-page'>
      <Card className='header-card'>
        <Text className='title'>Mock 数据测试</Text>
        <Text className='subtitle'>测试 @tarojs/plugin-mock 插件是否正常工作</Text>
      </Card>

      <Card className='buttons-card'>
        <View className='test-buttons'>
          {testApis.map((api, index) => (
            <Button
              key={index}
              type='primary'
              size='large'
              loading={loading}
              onClick={() => testApi(api.name, api.call)}
              className='test-btn'
            >
              {api.name}
            </Button>
          ))}
        </View>
      </Card>

      {result && (
        <Card className='result-card'>
          <Text className='result-title'>测试结果:</Text>
          <View className='result-content'>
            <Text className='result-text'>{result}</Text>
          </View>
        </Card>
      )}

      <Card className='info-card'>
        <Text className='info-title'>使用说明:</Text>
        <View className='info-content'>
          <Text className='info-text'>• 点击上方按钮测试不同的 API 接口</Text>
          <Text className='info-text'>• Mock 数据配置在 mock/index.js 文件中</Text>
          <Text className='info-text'>• 开发环境下会自动使用 Mock 数据</Text>
          <Text className='info-text'>• 生产环境下会请求真实的 API 接口</Text>
        </View>
      </Card>
    </View>
  )
}